<style scoped>
  @import "../css/page3.css"; /* 引入预定义变量 */
</style>

<template>

  <div id="main" class="div_main">

  <p class="title">模型预测</p>


  <div id="but">
  <button v-on:click="go">训练数据处理</button>
  <button v-on:click="show_up_load_dialog">加载模型</button>
  <button type="button" v-on:click="predict">模型预测</button>
  <button type="button" v-on:click="go_next">保存数据</button>
  </div>

  <select id="select" class="select" @change="selection">

  </select>

  <div id="warning" class="warn">
  模型预测中
  </div>
  <img id="myImage" style="width:500px" :src="img" class="im">

  <div id="upload_dialog" class="upload_dialog_div">
        <div class="style_content_div">
          <div class="style_content_upper_div">
            <div class="style_content_file_div">
              <span class="style_file_span">上传文件：</span>
              <input class="style_file_content" type="file" id="upload_file_id" accept=".h5">
            </div>
          </div>

          <div class="style_content_lower_div">
            <span class="style_content_span" @mouseover="mouseOver" @mouseleave="mouseLeave" v-on:click="hide_up_load_dialog">取消</span>
            <span class="style_content_span" @mouseover="mouseOver" @mouseleave="mouseLeave" v-on:click="show">确定</span>
          </div>

        </div>
    </div>


  </div>
</template>

<script>

var model
var flag
var index

export default{

data(){

    return{

    img:''

    }
  },
  methods:{

  /*
  跳转到数据处理页面（page5）
  */
    go(){
      flag = 1;
      this.$router.push({path:'page2',query:{nameId:'model_predict'}});
    },

    go_next(){
      this.$router.push({path:'page5', query:{idx:index}});
    },

    show_up_load_dialog:function(){
          var up_dialog = document.getElementById("upload_dialog");
          up_dialog.style.visibility = "visible";
        },

        hide_up_load_dialog:function(){
          var up_dialog = document.getElementById("upload_dialog");
          up_dialog.style.visibility = "hidden";
        },

        show:function(){
          var reader = new FileReader();
              reader.onload = function()
              {
                  alert("模型导入成功！");
              }
              var f = document.getElementById("upload_file_id").files[0];
              reader.readAsText(f);
              model = f.name;
              this.$options.methods.hide_up_load_dialog();
        },

        predict(){

          if(typeof(model) == "undefined" || model == '' || model == null){
            alert("请先点击加载模型！");
            return;
          }

          if(typeof(flag) == "undefined" || flag == '' || flag == null){
            alert("请先点击训练数据处理按钮！");
            return;
          }

          document.getElementById("warning").style.visibility = "visible"

          this.$axios.post('/api/predict',[model])
          .then(function(response){
          document.getElementById("myImage").src = "data:;base64," + response.data;
          })
          .then(function(response){
            alert("预测完成");
            document.getElementById("warning").style.visibility = "hidden";
          })


          index = this.$route.query.idx;
          var obj = document.getElementById("select")
          obj.options.length = 0;
          for(var i = 0; i < index.length; i++){
            obj.options.add(new Option(index[i], i+1));
          }
        },

        selection(){
        var obj = document.getElementById("select");
        var index = obj.selectedIndex;
        var value = obj.options[index].value;

        this.$axios.post('/api/selection',[value])
        .then(function(response){
        document.getElementById("myImage").src = "data:;base64," + response.data;
        })
        }

  }
}

</script>
